<template>
	<div class="commodity">
    <div class="ge"></div>    
		<!-- 条形码放大 -->
		<mt-popup
			v-model="popup"
			popup-transition="popup-fade">
			<div class="barcode-popup">
				<div class="COMMODITYNAME">
						{{BARCODE.NAME}}					
				</div>
        <div class="list-up-right">
          <span ><span>现价:</span><em class="commodity-retailPrice present-price">{{BARCODE.CURRPRICE  | moneyFilter}}</em></span>
          <span v-if="BARCODE.CURRPRICE-BARCODE.ORIPRICE" :class="BARCODE.CURRPRICE-BARCODE.ORIPRICE > 0 ? 'commodity-rise' : 'commodity-fall'">
            <span class="commodity-r-f">(<i class="icon"></i><em v-text="BARCODE.CURRPRICE-BARCODE.ORIPRICE"></em>)</span>
          </span>
          <span class="list-down-right">原价: <em class="commodity-retailPrice">{{BARCODE.ORIPRICE  | moneyFilter}}</em></span>
        </div>        
				<barcode  :value="BARCODE.CODE"></barcode>
			</div>
		</mt-popup>
		<!-- 条形码放大 end-->
		<!-- 申请人操作信息 -->
		<ApplicantOperation :message="actionData" :goods="goods"/>
		<!-- 申请人操作信息 end-->

		<!--商品信息-->
    <!-- <div class="spinner geto" v-show="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>       -->
		<div class="page-loadmore-wrapper iphone-scroll" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
			<ul
				v-infinite-scroll="loadMore"
				infinite-scroll-disabled="loading"
				infinite-scroll-distance="10"
				infinite-scroll-immediate-check="true">
				<li class="commodity-list"  v-for="(item,i) in CommodityList" :key="i">
					<div class="COMMODITYNAME">
							<div style="float: left;">{{i+1}}.</div>{{item.COMMODITY_NAME}}
							<!-- <span class="commodity-unit" title="单位">&nbsp;/&nbsp;{{item.COMMODITY_UNIT}}</span> -->
					</div>
          <div class="list-up-right">
            <span ><span>现价:</span><em class="commodity-retailPrice present-price">{{item.COMMODITY_CURRPRICE | moneyFilter}}</em></span>
            <span v-if="item.COMMODITY_CURRPRICE-item.COMMODITY_ORIPRICE" :class="item.COMMODITY_CURRPRICE-item.COMMODITY_ORIPRICE > 0 ? 'commodity-rise' : 'commodity-fall'">
              <span class="commodity-r-f">(<i class="icon"></i><em v-text="item.COMMODITY_CURRPRICE-item.COMMODITY_ORIPRICE"></em>)</span>
            </span>
            <span class="list-down-right">原价: <em class="commodity-retailPrice">{{item.COMMODITY_ORIPRICE | moneyFilter}}</em></span>
          </div>          
					<div class="list-down">
						<div class="list-down-top list-item">
							<span class="list-down-right list-down-right-end">
								 <span class="time-error" v-html="commodityState(item.OPERATE_DATE)"></span>
								 <em class="operate-date">{{item.OPERATE_DATE}}</em>
							</span>
             				<div class="barcode-wrap">
								<div>
									<span>商品类型: {{item.COMMODITYTYPE_NAME}}</span>
									<span>商品单位: {{item.COMMODITY_UNIT}}</span>
                  <span>商品规格: {{item.COMMODITY_RULE}}</span>
								</div>
								<barcode @click.native="amplificationBarcode(item.COMMODITY_BARCODE,item.COMMODITY_NAME,item.COMMODITY_CURRPRICE,item.COMMODITY_ORIPRICE)" class="barcode"   height="60" font-size="20"   :value="item.COMMODITY_BARCODE"></barcode>
							</div>
            			</div>
						<!--<div class="list-down-bottom list-item">-->
							<!--<span><i class="icon icon-red"></i>当前价格: <em class="commodity-retailPrice">{{item.COMMODITY_CURRPRICE | moneyFilter}}</em></span>-->
							<!--<span class="list-down-right"><i class="icon icon-red"></i>原价: <em class="commodity-retailPrice">{{item.COMMODITY_ORIPRICE | moneyFilter}}</em></span>-->
						<!--</div>-->
					</div>
				</li>
				<li class="more_loading" v-show="!queryLoading">
					<span v-show="loading&&!allLoaded">
            <mt-spinner type="fading-circle"></mt-spinner>
					</span>
					<span v-show="loading&&!allLoaded" style="font-size: 12px"></span>
					<span v-show="allLoaded" style="font-size: 12px">加载完毕</span>
				</li>
			</ul>
		</div>
		<!--商品信息 end-->
		<!--加载动画-->
		<!-- <div class="loading-wrap" v-show="loadingAnimate">
			<img width="80%" src="../assets/img/new_logo.gif" alt="">
		</div> -->
		<!--加载动画 end-->
	</div>
</template>
<script>
import VueBarcode from "vue-barcode";
import ApplicantOperation from "@/components/ApplicantOperation";
export default {
  name: "Commodity",
  components: {
    barcode: VueBarcode,
    ApplicantOperation
  },
  data() {
    return {
       spinner: true,
      //首页加载动画
      loadingAnimate: true,
      //滑动区 的高度
      wrapperHeight: 0,
      //无限加载 初始化
      loading: false,
      allLoaded: false,
      queryLoading: false,
      //总页数
      pages: 0,
      //当前页码
      pageNum: 1,
      //每页商品数
      pageSize: 10,
      //get请求参数
      actionData: "EA665579A4BAFE4C",
      //商品 汇总
      CommoditySum: [],
      //绑定到页面的商品
	  CommodityList: [],
	  //价格变动的商品
	  goods:{},
      //价格变动的数量
      changeCell: 18,
      //条形码 弹框
      popup: false,
      BARCODE: {
		CODE:0,
		NAME:0,
		CURRPRICE:'0',
    ORIPRICE:'0'
	  }
    };
  },
  methods: {
    //加载更多
    loadMore() {
      this.loading = !this.queryLoading;
      setTimeout(() => {
        if (this.queryLoading) {
          return;
        }
        if (this.allLoaded) {
          this.loading = true;
          return;
        }
        this.pageNum++;
        this.loading = this.allLoaded;
        if (this.pageNum > this.pages) {
          this.allLoaded = true;
          return;
        }
        this.CommodityList = this.CommoditySum.slice(
          0,
          this.pageSize * this.pageNum
        );
      }, 500);
    },
    //商品调价生效状态
    commodityState(val) {
      let newTime = new Date().getTime(),
        commTime = new Date(val).getTime();
      if (newTime - commTime > 0) {
        return '<em style="color:#f58f3b;font-size:11px;">已生效</em>';
      } else {
        return '<em style="color:#bbbbbb;font-size:11px;">未生效</em>';
      }
    },
    //商品添加 涨跌 判断
    RiseOrFall(val1, val2) {
      let change = val1 - val2;
      change = String(change).indexOf(".") >= 0 ? change + "0" : change + ".00";
      if (change > 0) {
        return "¥" + change;
      } else if (change < 0) {
        change = -change;
        return "¥" + change;
      } else {
        return "";
      }
    },
    //放大条形码
    amplificationBarcode(val1,val2,val3,val4) {
      this.popup = true;
	//   console.log(val2);
	//   console.log(val3);
      this.BARCODE = {
		  CODE:val1,
		  NAME:val2,
		  CURRPRICE:val3,
		  ORIPRICE:val4
	  };
	//   console.log(this.BARCODE)
    },
    /*截取地址参数*/
    WechatGetQueryString(name) {
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
        r = window.location.search.substr(1).match(reg);
      if (r !== null) return unescape(r[2]);
      return null;
    },
    //微信登录
    WechatLogin() {
      let dq_urls = window.location.href.split("?"),
        code = this.WechatGetQueryString("code");
      this.actionData = this.WechatGetQueryString("HIGHWAYPROINST_ID");
      if (this.actionData === null) {
        this.actionData = this.WechatGetQueryString("state");
      }
      //      alert(this.urlCode);
      //      alert(code);
      //      alert(dq_urls);
      if (code === null) {
        //            微信认证地址
        window.location.href =
          "http://mall.eshangtech.com/getcode.html?appid=wx85e69a5fb601be16&scope=snsapi_base&state=" +
          this.actionData +
          "&redirect_uri=" +
          escape(dq_urls[0]);
      } else {
        let url =
          "http://mall.eshangtech.com:8010/HighWay/Handler/handler_ajax.ashx?action_type=GetWechatInfo&action_data=" +
          code;
        this.$ajax.get(url).then(res => {
          //                        alert(JSON.stringify(res))//查看微信返回的信息 openid
          let openid = res.data.WechatInfoObject[0].WECHAT_OPENID;
          if (openid === "") {
            openid = sessionStorage.getItem("openid");
          }
          if (openid !== null && openid.toString().length > 1) {
            sessionStorage.setItem("openid", openid);
            //              alert(openid);
            this.getCommodity();
          } else {
            alert("抱歉！您的权限不足，无法查看。");
            setTimeout(function() {
              WeixinJSBridge.call("closeWindow");
            }, 100);
          }
        });
      }
    },
    //获取商品信息
    getCommodity() {
      this.$http({
        url: "http://mall.eshangtech.com:8010/MobileServicePlatform/Handler/handler_ajax.ashx?",
        params: {
          action_type: "GetSalePriceChange",
          action_data: this.actionData
        }
      })
        .then(res => {
          this.spinner = false;
          if (res.status === 200) {
            if (typeof res.data !== "object") {
              alert("没有相关数据!");
              return;
            }
            if (res.data.CommodityList !== "") {
              let changeNum = 0,goods = [];
              this.CommoditySum = res.data.CommodityList;
              this.CommoditySum.forEach(val => {
                if (val.COMMODITY_ORIPRICE !== val.COMMODITY_RETAILPRICE) {
				  changeNum++;
				  goods.push(val);
                }
			  });
			  this.goods = {'goods':goods,'size':goods.length};
			//   console.log(this.goods);
              this.changeCell = changeNum;
              this.CommodityList = this.CommoditySum.slice(0, this.pageSize);
              this.pages = Math.ceil(
                res.data.CommodityList.length / this.pageSize
              );
            }
            setTimeout(() => {
              this.loadingAnimate = false;
            }, 100);
          } else {
            alert("请求失败!");
          }
        })
        .catch(error => {
          alert("网络连接失败");
        });
    }
  },
  created() {
    // this.WechatLogin();
    this.actionData = this.$route.params.id;
    this.getCommodity();
    scrollTo(0,0);
  },
  mounted() {
    this.wrapperHeight =
      document.documentElement.clientHeight -
      this.$refs.wrapper.getBoundingClientRect().top;
  }
};
</script>
<style scoped>
.ge{
   padding: 3rem 0 0 0;
}
.geto{
   padding: 0.5rem 0 0 0;
}
.mint-popup{
	width: 100%;
}
.more_loading {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.commodity-list {
  padding: 5px 1rem 0;
  margin-top: 10px;
  background: #fff;
}
.commodity-list span {
  font-size: 11px;
  color: #838383;
}
/* 条形码弹框 */
.barcode-popup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 .5rem;
  /* width: 100vw;
		height: 100vh; */
}
.barcode-popup .list-item{
	width: 100%;
	padding: 10px 1rem;
}
.barcode-popup .commodity-rise span{
	color: #f48e39;
}
.barcode-popup .commodity-name{
  max-width: 300px;
}
.barcode-popup barcode {
  width: 50%;
  height: 100px;
}
/* 条形码弹框 */
.barcode-wrap {
  display: flex;
  margin-top: 10px;
  /* height: 1.2rem; */
  color: #838383;
  justify-content: space-between;
}
.barcode-wrap span {
  display: flex;
  height: 0.8rem;
  max-height: 20px;
  align-items: center;
}
.vue-barcode-element {
  height: 2rem !important;
}
.barcode {
  display: flex;
  width: 9rem;
  height: 3rem;
  max-width: 180px;
  max-height: 60px;
  position: relative;
  right: -5px;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
}
.commodity-list .commodity-name {
  font-size: 13px;
  color: #303135;
}
.list-item {
  display: flex;
  justify-content: space-between;
}
.list-up {
  padding-bottom: 7.5px;
  border-bottom: 2px dotted #e6e6e6;
}
.list-down-top {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.list-down-bottom {
  justify-content: flex-start;
}
.list-down-right-end{

	
}
.commodity-name {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* padding: .3rem; */
}
.present-price {
  font-size: 16px;
}
/* 生效时间 */
.list-up-left {
  display: flex;
  align-items: center;
}
.time-error {
  display: inline-block;
  padding: 5px 8px;
  background: #f4f4f4;
  border-radius: 5px;
}
.operate-date {
  text-align: end;
}
.commodity-retailPrice {
  color: #f45051;
}

.icon {
  display: inline-block;
  width: 0.5rem;
  height: 0.6rem;
  max-width: 9px;
  max-height: 9px;
}
.commodity-list .commodity-rise span {
  color: #f48e39;
}
.commodity-rise i {
  background: url("../assets/img/icon_rise.png") center no-repeat;
  background-size: cover;
}
.commodity-fall i {
  background: url("../assets/img/icon_fall.png") center no-repeat;
  background-size: cover;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 330px) {
 .barcode-popup .commodity-name {
	max-width: 130px;
  }
  .list-up-left {
    display: flex;
    align-items: center;
  }
  .commodity-name {
    max-width: 110px;
    /* padding: .3rem; */
  }
}
.loading-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
}
.COMMODITYNAME{
  width: 100%;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-bottom: 2px dotted #e6e6e6;
}
</style>
